<!-- 导航栏组件 -->
<template>
  <div class="navigation">
    <div class="bar">
      <ul class="left">
        <li class="logo">
          <img src="../img/icon_bangmang.png" alt="" />
        </li>
        <li class="link">
          <router-link active-class="" :to="{ name: 'helpHall' }"
            >求助大厅</router-link
          >
        </li>
        <li class="link">
          <router-link active-class="" :to="{ name: 'postHelp' }"
            >发布求助</router-link
          >
        </li>
        <li class="link">
          <router-link active-class="" :to="{ name: 'center' }"
            >个人中心</router-link
          >
        </li>
      </ul>

      <ul class="right">
        <li class="link">
          <router-link active-class="" :to="{ name: 'chat' }">
            <img src="../img/pinglun.png" alt="" /> 消息
          </router-link>
        </li>
        <li class="link">
          <router-link v-show="!haslogin" :to="{ name: 'login' }">
            <img src="../img/a-wo.png" /> 登录
            <!-- <ul class="drop-down">
              <li class="drop-down-item">个人信息</li>
              <li class="drop-down-item">退出登录</li>
            </ul> -->
          </router-link>
          <span v-show="haslogin" class="logout" @click="userlogout"><img src="../img/a-wo.png" />退出登录</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { logout } from "@/api/user";
import {getToken, removeToken} from "@/utils/auth"
export default {
  name: "navigationBar",
  data() {
    return {
      haslogin: false,
      userInfo: {},
    };
  },
  methods: {
    // 用户退出登录
    userlogout: function () {
      var that = this;
      this.$confirm("是否确认退出?", "退出提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(that.$route.path);
          logout().then((response) => {
            removeToken();
            localStorage.removeItem("userInfo");
            that.haslogin = false;
            window.location.reload();
            that.$message({
              type: "success",
              message: "退出成功!",
            });
            //如果当前路由是在用户个人信息界面则返回到首页
            let rex = new RegExp("^/center(/.*)?$");
            if (rex.test(that.$route.path) || that.$route.path == "/chat") {
              that.$router.push({
                path: "/",
              });
            }
          });
        })
        .catch(() => {
          //
        });
    },
    routeChange: function () {
      var that = this;
      // this.activeIndex = this.$route.path == "/" ? "/Home" : this.$route.path;
      if (getToken() && localStorage.getItem("userInfo")) {
        //存储用户信息
        that.haslogin = true;
        that.userInfo = JSON.parse(localStorage.getItem("userInfo"));
        // console.log(that.userInfo);
      } else {
        that.haslogin = false;
      }
    },
  },
  watch: {
    $route: "routeChange",
  },
  created() {
    this.routeChange();
  },
};
</script>

<style scoped >
* {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
a {
  color: black;
}
.link {
  width: 100px;
  display: inline-block;
  height: 60px;
  position: relative;
}
.link a {
  text-decoration: none;
  width: 100%;
  display: inline-block;
  height: 60px;
  line-height: 60px;
  /* padding: 0px 15px; */
  box-sizing: border-box;
  text-align: center;
}
.link  img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.right .link {
  margin: 0px 20px 0px 20px;
}
.logo {
  display: inline-block;
}
.logo img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.left li a:hover {
  background-color: rgb(66, 174, 216);
  color: white !important;
}
.left {
  float: left;
}
.right {
  float: right;
}
.bar {
  width: 1192px;
  height: 60px;
  margin: 0px auto;
}
.navigation {
  width: 100%;
  min-width: 1192px;
  height: 60px;
  background-color: rgb(242, 242, 242);
}
.message {
  font-size: 20px;
}
.left li:nth-child(1) {
  margin-right: 20px;
}
.drop-down {
  top: 100%;
  left: 20px;
  width: 80px;
  position: absolute;
  background-color: blanchedalmond;
}
.drop-down-item {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  border: 1px solid black;
}
.logout{
  display: inline-block;
  cursor: pointer;
}
</style>